<template>
	<view class="notice" :style="'padding: ' + mydata.p_t + 'rpx ' + mydata.p_lr + 'rpx ' + mydata.p_b + 'rpx'">
		<view class="bg" :style="'background:' + mydata.bg_color + ';border-radius:' + mydata.r_t + 'rpx ' + mydata.r_t + 'rpx ' + mydata.r_b + 'rpx ' + mydata.r_b + 'rpx '">
			<view class="notice-icon-box"><text :style="'color:'+mydata.icon_color" :class="'icon-box iconfont ' + mydata.icon"></text></view>
			<view class="notice-box">
				<view class="notice-swiper" style="flex: 1 1 0%;height: 66rpx;">
					<swiper class="swiper" :indicator-dots="false" :vertical="true" :autoplay="true" :interval="interval" :duration="1000">
						<swiper-item @click="todetail(item)" class="uni-flex-row" v-for="(item, i) in list" :key="i">
							<text class="info" :style="'color:' + mydata.text_color">{{ item.title }}</text>
						</swiper-item>
					</swiper>
				</view>
				<text class="iconfont el-sc-gengduo icon" :style="'color:'+mydata.icon_color"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		interval() {
			return this.mydata.interval * 1000;
		}
	},
	data() {
		return {
			list: []
		};
	},
	created() {
		if(this.mydata.type=='1'){
			this.getnoticelist();
		}else{
			this.list=this.mydata.list
		}
		
	},
	methods: {
		todetail(item) {

			if (item.type == 1) {
				this.Jumpurl({
					type: 1,
					link: '../noticedetail/noticedetail?id=' + item.id,
					login_type:1
				});
			} else {
				if(this.mydata.type=='2'){
					this.Jumpurl(item.linkdata)
				}else{
				this.$http('/notice/' + item.id + '/1', {}, 'GET').then(res => {
					let content = res.data.msg.content;
					this.Jumpurl(JSON.parse(content));
				});	
				}
			
			}
		},
		getnoticelist() {
			let data={
				limit:this.mydata.num
			}
			this.$http('/notice/list/0',data, 'POST').then(res => {
				this.list = res.data.msg;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.notice {
	width: 100%;
	padding: 0 24rpx;
	overflow: hidden;
	.bg {
		height: 66rpx;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		margin: 0 auto;
		padding: 0 24rpx;
		border-radius: 12rpx;
		.notice-icon-box {
			display: flex;
			align-items: center;

			.icon-box {
			}
		}
		.notice-box {
			flex: 1;
			width: 0;
			display: flex;
			flex-wrap: nowrap;
			padding: 0rpx 16rpx;
			position: relative;
			.notice-swiper {
				height: 66rpx;
				.swiper {
					height: 66rpx;
				}
			}
			.info {
				font-size: 24rpx;
				line-height: 50rpx;
			}
		}
		.icon {
			font-size: 32rpx;
			line-height: 32rpx;
			height: 32rpx;
			position: absolute;
			z-index: 10;
			top: 18rpx;
			right: 16rpx;
		}
	}
}
</style>
